import React from 'react';
import { Box, Text } from '@nova-hf/ui';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import { IContext } from 'beta/typings/context';

import FirstStep from './containers/FirstStep';
import SecondStep from './containers/SecondStep';

type SkrefProps = {
  customerId: string;
  serviceId: string;
};

const Skref = ({ customerId, serviceId }: SkrefProps) => {
  const COLOR = 'green';

  const isMobile = true;

  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/thjonustur/${serviceId}`}
      title="Ljósleiðari"
      subTitle="Bóka tíma"
      icon="internet"
      childrenBottom={
        !isMobile && (
          <Box>
            <Text variant="pSmallRegular" color="grey500" renderAs="span">
              Upplýsingar um hraða og algengar
            </Text>
            <Text variant="pSmallBold" color={COLOR} renderAs="span">
              <a href="/"> spurningar </a>
            </Text>
            <Text variant="pSmallRegular" color="grey500" renderAs="span">
              sem gott er að spyrja þegar maður er ekki alveg viss
            </Text>
          </Box>
        )
      }
    >
      <FirstStep />
      <FirstStep />
      <SecondStep />
    </StepWrapper>
  );
};

Skref.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    serviceId: query.serviceId,
    namespacesRequired: [],
  };
};

export default Skref;